import React, { useContext, useEffect, useState } from 'react';
import { Table, Input, Button } from 'antd';
import { Link } from 'umi';
import { highPosts, ISkillListQuery, interviewList } from '@/utils/interface';
import { gethighPost } from '@/services';
import classNames from 'classnames';
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
// 直接引入样式
import styles from './highpost.less'
import { observer } from 'mobx-react-lite'
import useStore from '@/context/useStore';

import skill from '@/store/modules/skill';
import highPost from '@/store/modules/highPost';

const status = ['全部', '通过', '未通过', '不确定'];
const kong = ['通过', '未通过', '不确定']

const columns = [
    {
        title: '岗位名称',
        align: 'center',
        dataIndex: 'name',
    },
    {
        title: '学院',
        dataIndex: 'majorName',
        align: 'center'

    },
    {
        title: '版本号',
        dataIndex: 'stationVersion',
        align: 'center'

    },
    {
        title: '技能数量',
        dataIndex: 'skillNum',
        align: 'center'

    },
    {
        title: '作者',
        dataIndex: 'userName',
        align: 'center'

    },
    {
        title: '发起时间',
        dataIndex: 'createTime',
        align: 'center'

    }, {
        title: '操作',
        render: (row: highPosts) => <Link to={`/students/HighPostDetail?stationVersionId=${row.stationId}&shield=0&see=true`}>
            <EyeOutlined style={{ color: '#679cf6' }} />
        </Link>,
    }
];
const HighPost: React.FC = props => {
    let [curSkill, setCurSkill] = useState('');
    let [isMyInfo, setMyInfo] = useState(false);
    let [curStatus, setCurStatus] = useState(0);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [highpost, sethighpost] = useState<highPosts[]>([]);

    let queryParams: ISkillListQuery = { isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false };

    // 发起请求获取专业标签
    useEffect(() => {
        skill.getSkillLabel();
    }, [])


    // 发起请求获取项目列表
    useEffect(() => {
        // 拼接下参数
        gethighPost(queryParams).then((res: any) => {
            if (res.code == 200) {
                sethighpost(res.rows);
            }

        })


    }, [curSkill, curStatus, isMyInfo, searchTitle]);


    // 我的页面:孔大语
    return <div className={styles.postskill}>
        <div className={styles.box}>
            <section className={styles.post}>
                <section className={styles.major}>
                    <h2>专业：</h2>
                    <ul className={styles.statusList}>{
                        [{ id: '', name: '全部' }, ...skill.skillLabel].map(item => {
                            return <span className={item.id === curSkill ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurSkill(item.id)} key={item.id}>{item.name}</span>
                        })
                    }</ul>
                </section>

            </section>

            <div className={styles.table}>
                <div className={styles.search}>
                    {/* //模糊搜索 */}
                    <Input style={{ width: '210px', height: '35px', cursor: 'pointer' }} className={styles.input} placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                        if (e.keyCode === 13) {
                            setSearchTitle(title)
                        }
                    }} />

                </div>
                <Table className={styles.table} rowKey='majorId' dataSource={highpost} columns={columns as any} />
            </div>
        </div>
    </div>
}
export default observer(HighPost)